<template>
  <div class="privacy-agreement">
    <div class="privacy-agreement-box">
      <div class="content_title">帳號刪除協議</div>
      <div class="content_ts">
        一旦你的帳號刪除成功，將不可恢復，<br />
        且帳號下的所有數據都會被清除！
      </div>

      <div class="account__operation_box">
        <div class="account__operation_copywriting">
          <el-scrollbar>
            <div class="account__operation_title">
              <span> 如您經過慎重考慮後仍確定要刪除帳號，請您知</span>
              <span>悉並確認:</span>
            </div>
            <div class="account__operation_ts">
              <div>出於安全考慮，我們必須驗證您的身份後才可接受刪除申請</div>

              <span style="text-indent: -0.2em"
                >申請處理完畢後，您的個人資訊將被永久刪除，相關法律要求或允許我們保留的某些資訊除外，詳見我們的</span
              >

              <span class="plocy" @click="openUrl()">隱私政策</span>
            </div>
          </el-scrollbar>
          <div class="botton_dom">
            <el-checkbox
              v-model="checked"
              label="我已閱讀並同意此協議"
              size="large"
              class="agreemen"
            />

            <div class="green-btn-box">
              <el-button type="primary" class="green-btn" @click="confirm()" v-if="countDown === 0">
                確認刪除</el-button
              >
              <el-button
                type="info"
                class="green-btn"
                :class="{ 'green-btn-info': countDown !== 0 }"
                v-else
              >
                ({{ countDown }}S) 確認刪除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
// import { showToast } from 'vant'

const checked = ref(false)
const openUrl = () => {
  window.open('https://www.luckygame88.com/postalPay/privacy.html')
}
const screenWidth = ref(window.innerWidth)

const confirm = () => {
  if (checked.value) {
    if (screenWidth > 1200) {
      ElMessage({
        message: '請發郵件到 yojzxh@sysgamer.com 要求刪除賬號',
        type: 'success',
      })
    } else {
      // showToast('請發郵件到 yojzxh@sysgamer.com 要求刪除賬號')
    }
  } else {
    if (screenWidth > 1200) {
      ElMessage({
        message: '請先勾選同意賬號刪除政策',
        type: 'warning',
      })
    } else {
      // showToast('請先勾選同意賬號刪除政策')
    }
  }
}

const countDown = ref(5) // 定义计时器变量
const timerId = setInterval(() => {
  // 定时器函数
  countDown.value--
  if (countDown.value == 0) {
    clearInterval(timerId)
  }
}, 1000)
onMounted(() => {
  // 组件挂载后开启定时器
  timerId
})
onUnmounted(() => {
  // 组件卸载前清除定时器
  clearInterval(timerId)
})
</script>
<style lang="scss" scoped>
.privacy-agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;

  .privacy-agreement-box {
    height: 100vh;
    overflow: hidden;
    // background: url('../../assets/imgs/privacyagreementBG.jpg') no-repeat;
    background: linear-gradient(to bottom, #2b197a, #673585 50%, #693385);

    width: 766px;
    background-size: cover;
    height: 100%;
    overflow-y: auto;

    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 53px 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .content_title {
      margin-bottom: 32px;
      white-space: pre-wrap;
      font-size: 43px;
      font-family: HYQiHei;
      font-weight: 400;
      color: #fff;
      background: linear-gradient(
        180deg,
        rgb(234 223 252 / 98%) 4.54102%,
        hsla(0, 0%, 93.7%, 0.98)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .content_ts {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fff;
      white-space: pre-wrap;
    }
    .account__operation_box {
      height: 100%;
      margin-top: 51px;
      padding: 53px 45px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 13px;
      overflow: hidden;

      .account__operation_copywriting {
        height: 60%;
        // overflow-y: auto;
      }
      .account__operation_copywriting ::-webkit-scrollbar {
        display: none;
      }
      .account__operation_title {
        margin-bottom: 58px;
        font-weight: 400;
        font-style: normal;
        font-size: 32px;
        color: #333;
        white-space: pre-wrap;
        text-indent: -0.2em;
      }

      .account__operation_ts {
        font-weight: 400;
        font-style: normal;
        font-size: 32px;
        color: #333;
        white-space: pre-wrap;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-x: hidden;
        overflow-y: hidden;
      }

      .green-btn-box {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .agreemen {
        margin: 32px 10px 32px 10px;
      }
    }
  }
}
</style>
<style lang="scss">
.privacy-agreement {
  .green-btn {
    width: 400px;
    height: 80px;
    line-height: 80px;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: 400;
    background: #693385;
    border: none;
    margin-top: 10px;
  }
  .green-btn-info {
    background: #909399;
  }
  .plocy {
    font-weight: 400;
    font-style: normal;
    font-size: 30px;

    white-space: pre-wrap;
    color: #693385;
  }
}

/* 基础样式 */

/* 当屏幕宽度小于或等于768像素时，应用以下样式 */
/* 当屏幕宽度小于或等于768像素时，应用以下样式 */
@media (max-width: 1200px) {
  body {
    .account__operation_title {
      font-size: 24px !important;
    }
    .account__operation_ts {
      font-size: 24px !important;
    }
    .plocy {
      font-size: 24px !important;
    }
    .el-checkbox__label {
      display: flex !important;
      align-items: center !important;
      font-size: 22px !important;
      font-family: PingFang SC !important;
      font-weight: 400 !important;
      color: #333 !important;
      // margin-top: 5px;
    }
    .el-checkbox__inner {
      width: 20px !important;
      height: 20px !important;
      // background: #693385 !important;
    }
    .el-checkbox__inner:after {
      // border: 3px solid transparent;
      height: 9px;
      left: 6px;
      position: absolute;
      top: 1px;
    }
    .green-btn {
      width: 214px !important;
      height: 52px !important;
      line-height: 50px !important;
      font-size: 22px !important;
      font-family: PingFang SC !important;
      font-weight: 400 !important;
    }
    // .botton_dom {
    //   margin-top: 30px;
    // }
    .agreemen {
      margin: 40px 10px 10px 10px !important;
    }
    .account__operation_copywriting {
      height: 68% !important;
      // overflow-y: auto;
    }
  }
}
@media (min-width: 1200px) {
  body {
    .el-checkbox__label {
      display: flex !important;
      align-items: center !important;
      font-size: 32px !important;
      font-family: PingFang SC !important;
      font-weight: 400 !important;
      color: #333 !important;
      // margin-top: 5px;
    }
  }
  .el-checkbox__inner {
    width: 30px !important;
    height: 30px !important;
  }
  .el-checkbox__inner:after {
    // border: 3px solid transparent;

    height: 14px;
    left: 10px;
    position: absolute;
    top: 5px;
  }
}
</style>
